<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch"
          action="${request.getContextPath()}/stageWipProfile/stageWipProfile" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="stageWipProfile"/>
            <label>Tech/type：</label>
            <g:select name="materia" from="${materiaType}" data-toggle="selectpicker" data-live-search="true"
                      id="materia"
                      optionKey="label" optionValue="value" value="${materia}" data-nextselect="#partName"
                      data-width="200"
                      data-refurl="${request.getContextPath()}/JsonData/getOptionHTMLByTarget?materia={value}&SYS_QUERY_NAME=partList"
                      noSelection="['': '===请选择===']"/>&nbsp;
            <label>prod（产品名称）：</label>
            <g:select name="name" from="${partList}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="label" optionValue="value" value="${name}" id="partName" data-width="200"
                      noSelection="['': '===请选择===']"/>
            <input name="DTN" type="radio" value="1" <g:if test="${DTN == '1'}">checked="checked"</g:if>/>
            <label>DTN</label>
            <input name="DTN" type="radio" value="2" <g:if test="${DTN == '2'}">checked="checked"</g:if>/>
            <label>history</label>
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <div style="margin: auto 0; width:99%;">
        <div class="row" style="padding: 0 8px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div>
                            <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                                <tr>
                                    <th style="border: none">Ship Target:</th>
                                    <td style="border: none">${stageShip.PLAN_WO[0]}</td>
                                    <th style="border: none">Stage:</th>
                                    <td style="border: none">${stageShip.SHIPTARGET[0]}</td>
                                    <th style="border: none">Shipout/Wait Ship:</th>
                                    <td style="border: none">${stageShip.SHIP[0]}</td>
                                    <th style="border: none">Total Wip:</th>
                                    <td style="border: none">${totalWip.WIP[0]}</td>
                                </tr>
                            </table>
                        </div>

                        <div style="mini-width:800px;height:440px;" id="profile"
                             data-url="${request.getContextPath()}/stageWipProfile/stageWipProfile"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript" src="${request.getContextPath()}/js/echarts/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('profile'));
    var contextPath = "${request.getContextPath()}";
    var data = [];
    <g:each in="${stageWipProfile}" status="i" var="profile">
    data.push('${profile.STAGE}')
    </g:each>
    <g:each in="${lastStage}" status="i" var="lastStage">
    </g:each>
    var
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var html = '';
                        if (params.length > 0) {
                            Xindex = params[0].dataIndex;
                            for (var int = 0; int < params.length; int++) {
                                html += params[int].seriesName + ':' + params[int].data + '<br>';
                            }
                        }
                        return html;

                    }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    data: ['Run', 'Wait', 'Hold', 'Move', 'target', 'acc.wip']
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '26%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data,
                        axisLabel: {
                            interval: 0,
                            rotate: 90
                        }

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        boundaryGap: ['20%', '20%'],
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        boundaryGap: ['20%', '20%'],
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: 'Hold',
                        type: 'bar',
                        stack: 'state',

                        data: ${stageWipProfile.HOLD},
                        itemStyle: {
                            normal: {color: '#EB504C'}

                        }
                    },
                    {
                        name: 'Wait',
                        type: 'bar',
                        stack: 'state',
                        data:  ${stageWipProfile.WAIT},
                        itemStyle: {
                            normal: {color: '#84B4E0'}
                        }
                    },
                    {
                        name: 'Run',
                        type: 'bar',
                        stack: 'state',
                        data:  ${stageWipProfile.RUN},
                        itemStyle: {
                            normal: {color: '#92D050'}
                        }
                    },
                    {
                        name: 'Move',
                        type: 'line',

                        showSymbol: false,
                        hoverAnimation: false,
                        data: ${stageWipProfile.MOVE},
                        itemStyle: {
                            normal: {color: '#BF9000'}
                        }
                    },
                    {
                        name: 'target',
                        type: 'line',

                        showSymbol: false,
                        hoverAnimation: false,
                        data: ${stageWipProfile.TARGET},
                        itemStyle: {
                            normal: {color: '#C0C0C0'}
                        }
                    },
                    {
                        name: 'acc.wip',
                        type: 'line',
                        yAxisIndex: 1,
                        showSymbol: false,
                        hoverAnimation: false,
                        data: ${list},
                        itemStyle: {
                            normal: {color: '#FF0000'},
                        }
                    },
                    {
                        name: '平行于y轴的趋势线',
                        type: 'line',
//                        yAxisIndex: 1,
                        markLine: {

                            itemStyle: {
                                normal: {
                                    borderWidth: 1,

                                    lineStyle: {

                                        type: 'dash',
                                        color: '#333 ',
                                        width: 1,
                                    },

                                    label: {
                                        formatter: '',
                                        textStyle: {
                                            fontSize: 16,
                                            fontWeight: "bolder",
                                        },
                                    }
                                },

                            },
                            data: [
                                // {type: 'average', name: '平均值'},
                                [{
                                    coord: ['${lastStage}', 0]
                                }, {
                                    coord: ['${lastStage}', 500]
                                }]
                            ]
                        }
                    }
                ]
            };
    ;
    // 使用刚指定的配置项和数据显示图表。
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    myChart.on('click', function (params) {

        var url = "${request.getContextPath()}/stageWipProfile/stageWipDetails?stage=" + params.name + "&materia=" + $("#materia").val() + "&name=" + $("#partName").val();
        console.log(url);
        $(this).dialog({
            id: 'mydialog',
            url: url,
            width: 1200,
            height: 400,
            title: 'Stage：' + params.name
        });

    });
</script>